<template>
  <!-- 查看其他绿地信息对话框 -->
  <!-- <div class="app-container" style="overflow-y:auto"> -->
    <div class="app-container">
    <!-- 基础信息 -->
    <el-row class="content-row">
      <el-col :span="24">
        <el-row>
          <el-descriptions
            :column="1"
            border
            :contentStyle="contentStyle"
            :labelStyle="labelStyle"
            size:small
          >
            <el-descriptions-item>
              <template slot="label"> OBJECTID </template>
              {{ formData.objectid }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 名称 </template>
              {{ formData.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 地址 </template>
              {{ formData.address }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 面积(㎡) </template>
              {{ formData.area }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 绿地大类 </template>
              <dict-tag
                :options="dict.type.sys_greenland_type"
                :value="formData.category_type"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 绿地中类 </template>
              <dict-tag
                :options="dict.type.sys_greenland_type_m"
                :value="formData.medium_type"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 供水方式 </template>
              {{ formData.water_supply }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 供水来源 </template>
              {{ formData.water_source }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 填报人 </template>
              {{ formData.collector }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 填报时间 </template>
              {{ this.localDate(formData.collecttime) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 与三调数据对比 </template>
              {{ formData.sjly }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 信息记录备注 </template>
              {{ formData.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row></el-col
      >
    </el-row>
    <el-row class="content-row" v-show="false">
      <el-col :span="24" class="title-row">
        <span>| 照片资料</span>
      </el-col>
      <el-col :span="24">
        <template v-if="picFileList.length !== 0">
          <el-image
            style="width: 100px; height: 100px; margin: 10px"
            v-for="(pic, index) in picFileList"
            :key="index"
            :src="pic"
            :preview-src-list="picFileList"
          >
          </el-image>
        </template>
        <div
          v-if="picFileList.length == 0"
          style="margin: 10px; text-align: center"
        >
          暂无照片
        </div>
      </el-col>
    </el-row>

    <div class="footer">
      <el-button type="primary" plain icon="el-icon-edit" @click="handleUpdate"
        >修 改</el-button
      >
      <el-button
        type="primary"
        plain
        icon="el-icon-circle-close"
        @click="cancel"
        >关 闭</el-button
      >
    </div>
  </div>
</template>

<script>
import { getAttachList } from "../../../api/attachment/attach";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js";
import { mapActions, mapGetters } from "vuex";
export default {
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  inject: ["toggleComponent"],
  dicts: [
    "sys_greenland_type",
    "sys_greenland_type_m",
    "sys_greenland_type_s",
    "sys_guangms",
    "sys_guangsy",
  ],
  data() {
    return {
      picFileList: [],
      tableData: [],
      // 内容样式
      contentStyle: {
        "text-align": "left",
        // "min-width": "320px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      // label样式
      labelStyle: {
        "width": "120px",
        "text-align": "left",
        // "min-width": "120px",
        "background-color": "#e7f6f3",
      },
      activeName: "first",
      title: null,
      // 当前行数据
      rowFormData: null,
      // 遮罩层
      visible: false,
      // 修改表单参数
      formData: {},
      // 查询图层
      featureLayer: null,
      feature: undefined,
      selectedGraphic: undefined,
    };
  },
  created() {},
  activated() {
    console.log(this.paramObj.feature.attributes);
    this.feature = this.paramObj.feature;
    console.log(this.paramObj.feature.geometry);
    this.feature.attributes.area = geometryEngine.planarArea(
      this.paramObj.feature.geometry,
      "square-meters"
    );
    this.formData = this.feature.attributes;
    this.featureLayer = this.paramObj.featureLayer;
    this.selectedGraphic = this.paramObj.selectedGraphic;
    this.layerView = this.paramObj.layerView;
    // 查询附件
    this.getAttachment();
    // this.show();

  },
  mounted() {
    // this.initEditable();
    // this.rowFormData = this.paramObj.detailData;
    // this.featureLayer = this.paramObj.featureLayer;
    // this.show();
  },
  methods: {
    ...mapActions("map", ["setHighlight", "removeHighlight", "cleanHighlight"]),
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:rgb(28 133 195 / 20%);";
      }
    },

    cancel() {
      this.removeHighlight("roadld_highlight");
      this.toggleComponent("dataPanel");
    },
    // 格式化日期
    localDate(time) {
      if (time == null) return "";
      var localTime = this.$moment
        .parseZone(time)
        .local()
        .format("YYYY-MM-DD HH:mm:ss");
      //   console.log(localTime);
      return localTime;
    },
    // 查询附件
    getAttachment() {
      let _self = this;
      _self.picFileList = [];
      const attachGroupId = _self.formData.photo;
      if (attachGroupId == undefined) return;
      console.log("attachGroupId:" + attachGroupId);
      getAttachList(attachGroupId).then((response) => {
        if (response.code == "200" && response.data) {
          response.data.rows.forEach((element) => {
            const prefixUrl = window.mapConfig.nodeurl + "/attachfiles/";
            var attachUrl =
              prefixUrl + element.attachId + "." + element.attachType;

            var obj = {
              id: element.attachId,
              name: element.attachName,
              url: prefixUrl + element.attachId + "." + element.attachType,
            };
            _self.picFileList.push(obj.url);
          });
        }
      });
      // arcgis js api方法
      // const attachmentQuery = new AttachmentQuery({
      //   objectIds: [objectid],
      //   // attachmentsWhere: `objectid = ${objectid}` // attachment queries
      // });
      // _self.featureLayer
      //   .queryAttachments(attachmentQuery)
      //   .then((attachments) => {
      //     console.log(attachments);
      //     if (attachments[objectid]) {
      //       let attachment = attachments[objectid];
      //       attachment.forEach((item) => {
      //         _self.picFileList.push(item.url);
      //       });
      //     }
      //   })
      //   .catch(function (error) {
      //     console.log("attachment query error", error);
      //   });
    },
    // 修改按钮
    handleUpdate() {
      let _self = this;
      if (_self.selectedGraphic != null)
        _self.mapview.graphics.remove(_self.selectedGraphic);
      let paramObj = {
        feature: this.feature,
        featureLayer: this.featureLayer,
        selectedGraphic: this.selectedGraphic,
        layerView:this.layerView
      };
      this.toggleComponent("editPanel", paramObj);
    },
  },
};
</script>
<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #11a983;
  margin-bottom: 1vh;
}

.content-row {
  margin-bottom: 1vh;
}

//::v-deep .el-descriptions__header {
// margin-bottom: 10px;
//}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  color: #11a983;
}
</style>
